<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>报修</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <link rel="stylesheet" href="${path}/lib/weui.min.css">
    <link rel="stylesheet" href="${path}/css/jquery-weui.css">
    <link rel="stylesheet" href="${path}/css/demos.css">
    <link rel="stylesheet" href="${path}/css/LUploader.css">
    <link rel="stylesheet" href="${path}/css/mobiscroll-3.0.0.min.css?dt=20170511"/>
    <style>
        .weui-input {
            border-bottom: 1px solid grey;
        }

        #projectList_dummy {
            font-size: 1em;
            border: none;
        }

        #areaList_dummy {
            display: none;
        }

        .mbsc-fr-btn-c{
            display: none;
        }
        .mbsc-fr-w {
            font-size: 1.1em !important;
        }

        .jian-ms-btn {
            font-size: 1.8em !important;
        }
    </style>
</head>

<body ontouchstart>
<header class='demos-header'>
    <h1 class="demos-title">报修</h1>
</header>
<form id="taskForm">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="name" class="weui-label">报修人姓名</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="name" value="${sessionScope.SESSION_USER.realname}">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="mobile" class="weui-label">报修人电话</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" name="mobile" maxlength="12"
                       value="${sessionScope.SESSION_USER.mobile}">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="area" class="weui-label">地点</label>
            </div>
            <div class="weui-cell__bd">
                <%--<input class="weui-input" type="text" name="area" value="">--%>
                <c:choose>
                    <c:when test="${areaList ne null && fn:length(areaList) > 0}">
                        <ul id="areaList" name="area">
                            <c:forEach var="map" items="${areaList}">
                                <li>
                                    <span data-id="${map.key.value}" data-value="${map.key.value}">${map.key.value}</span>
                                    <ul>
                                        <c:forEach var="listItem" items="${map.value}">
                                            <li data-id="${listItem.value}" data-value="${listItem.value}">${listItem.value}</li>
                                        </c:forEach>
                                    </ul>
                                </li>
                            </c:forEach>
                        </ul>
                    </c:when>
                </c:choose>
                    <input class="weui-input" type="text" name="area" value="" id="area" placeholder="请选择地点" readonly>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label for="project" class="weui-label">项目</label>
            </div>
            <div class="weui-cell__bd">
                <c:choose>
                    <c:when test="${projectList ne null && fn:length(projectList) > 0}">
                        <select id="projectList" name="project">
                            <c:forEach var="item" items="${projectList}">
                                <option value="${item.value}">${item.value}</option>
                            </c:forEach>
                        </select>
                    </c:when>
                    <c:otherwise>
                        <input class="weui-input" type="text" name="project" value="">
                    </c:otherwise>
                </c:choose>
            </div>
        </div>

        <%--<div class="weui-cells weui-cells_form">--%>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="详细描述" rows="3" name="detail"></textarea>
                <div class="weui-textarea-counter"><span>0</span>/200</div>
            </div>
        </div>
        <%--</div>--%>

        <input name="images" type="hidden" id="inputImg">

        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传</p>
                    </div>

                    <div class="LUploader" id="demo1">
                        <div class="LUploader-container">
                            <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front'
                                   type="file"/>
                            <ul class="LUploader-list"></ul>
                        </div>
                        <div>
                            <div class="icon icon-camera font20"></div>
                            <p>单击上传</p>
                        </div>
                    </div>

                    <div class="LUploader" id="demo2">
                        <div class="LUploader-container">
                            <input data-LUploader='demo2' data-form-file='basestr' data-upload-type='back' type="file"
                                   class="img-upload-input"/>
                            <ul class="LUploader-list"></ul>
                        </div>
                        <div>
                            <div class="icon icon-camera font20"></div>
                            <p>单击上传</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:" id="submit">确定</a>
</div>
<div class="clear" style="height: 10%;"></div>

<jsp:include page="foot.jsp"/>

<script src="${path}/lib/jquery-2.1.4.js"></script>
<%--<script src="${path}/lib/fastclick.js"></script>--%>
<script src="${path}/js/jquery-weui.js"></script>
<script src="${path}/js/LUploader.js"></script>
<script src="${path}/js/mobiscroll-3.0.0.min.js?dt=20150824"></script>
<script>
    $('#submit').click(function () {
        $('input[img-path]').each(function (index, obj) {
            var imgpath = obj.getAttribute('img-path');
            if (imgpath == '') return true;
            var imgsVal = $('#inputImg').val();
            if (imgsVal == '' || imgsVal == undefined) {
                $('#inputImg').val(imgpath);
            } else {
                $('#inputImg').val(imgsVal + "," + imgpath);
            }
        });
        $.post('${path}/task/report.do', $('#taskForm').serialize(), function (result) {
            if (result.success) {
                window.location.href = '/task/wait/list.do';
            } else {
                $.toptip('系统繁忙,请联系管理员');
            }
        }, 'JSON');
    });

    [].slice.call(document.querySelectorAll('input[data-LUploader]')).forEach(function (el) {
        new LUploader(el, {
            url: '${path}/imgUpload.do',//post请求地址
            multiple: false,//是否一次上传多个文件 默认false
            maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb
            accept: 'image/*',//可上传的图片类型
            quality: 0.1,//压缩比 默认0.1  范围0.1-1.0 越小压缩率越大
            showsize: false//是否显示原始文件大小 默认false
        });
    });

    $("#projectList").mobiscroll().select({
        theme: "material",
        lang: "zh",
        defaultValue: [Math.floor($('#projectList option').length / 2)],
        cancelText: null,
        headerText: function (valueText) {
            return "选择项目";
        }
    });

    //    $("#areaList").mobiscroll().select({
    //        theme: "material",
    //        lang: "zh",
    //        defaultValue: [Math.floor($('#areaList option').length / 2)],
    //        cancelText: null,
    //        headerText: function (valueText) {
    //            return "选择地区";
    //        }
    //    });

    $("#area").click(function () {
        $("#areaList").click();
    });

    $('#areaList').mobiscroll().treelist({
        theme: 'android-holo-light',//样式
        lang: 'zh',//语言
        display: 'bottom',//指定显示模式
        fixedWidth: [100, 100],//2组滚动框的宽度
        placeholder: '请选择地点',//placeholder
        inputClass: 'ui-input', //为插件生成的input添加样式
        inputName: 'area',
        btnClass: 'jian-ms-btn', //设置按钮显示的样式
        labels: ['部', '地点'],
        cancelText: null,
        headerText: '请选择地点',//选择区域头部
        rows: 5,//滚动区域内的行数
//        defaultValue: [0, 1],//设置初始值
//        formatResult: function (array) { //返回自定义格式结果
//            province = $('#areaList>li').eq(array[0]).children('span');
//            city = $('#areaList>li').eq(array[0]).find('ul li').eq(array[1]);
////            $("input[name='province']").val(province.attr('data-id'))
////            $("input[name='city']").val(city.attr('data-id'))
////            $("input[name='arry']").val(array)
//            return province.text() + ' ' + (city.text() == null ? "" : city.text())
//        }
    });

    $('#areaList').on('change',function () {
        $('#area').val($('div[aria-selected=true]').text());
    });
</script>

</body>
</html>
